import TaskList from './TaskList'
import { useReducer } from 'react'
import tasksReducer from './tasksReducer'

export default function TaskApp() {
    const a = useReducer(tasksReducer, initialTasks)
    const [tasks, dispatch] = useReducer(tasksReducer, initialTasks)
    function handleAddTask(text) {
        dispatch({
          type: 'added',
          id: nextId++,
          text: text,
        })
      }
    
    function handleChangeTask(task) {
        dispatch({
            type: 'changed',
            task: task,
        })
    }

    function handleDeleteTask(taskId) {
        dispatch({
            type: 'deleted',
            id: taskId,
        })
    }
    

    return (
        <>
            <h1>行程安排</h1>
            {/* <AddTask onAddTask={handleAddTask} /> */}
            <button onClick={() => handleAddTask()}>增加行程</button>
            <TaskList
                tasks={tasks}
                onChangeTask={handleChangeTask}
                onDeleteTask={handleDeleteTask}
            />
        </>
    )
}

let nextId = 3
const initialTasks = [
  {id: 0, text: '参观卡夫卡博物馆', done: true},
  {id: 1, text: '看木偶戏', done: false},
  {id: 2, text: '打卡列侬墙', done: false},
]
